import 'dart:io';
import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:sciolto/POJO/Song.dart';
import 'package:sciolto/POJO/SongList.dart';
import 'package:sciolto/UI/SelectPage.dart';
import 'package:sciolto/api/Common_api.dart';
import 'package:sciolto/api/music.dart';
import 'package:sciolto/util/setting.dart';
import 'package:sciolto/widget/custom_route.dart';
import 'package:sciolto/widget/custom_widget.dart';

/// 标志当前歌单状态的枚举类
/// 其中：
///   error: 返回数据时出现错误等
///   empty: 当前歌单中没有歌曲
///   success: 正常情况(无错误且有歌曲)
///   waiting: 等待异步操作
enum SonglistPageState{
  error,
  empty,
  success,
  waiting
}

// ignore: must_be_immutable
class SongListPage extends StatefulWidget{

  /// 当前歌单界面显示的歌单
  SongList songList;

  /// 构造方法，需要获取当前显示的歌单
  /// details:
  ///
  /// * [SongList]
  SongListPage(this.songList);
  
  @override
  State<StatefulWidget> createState() => _SongListPageState();
}

class _SongListPageState extends State<SongListPage>{

  /// 尺寸参数
  double _x, _y, _width, _height;

  double get x => _x;

  double get y => _y;

  /// 当前歌单中的歌曲列表
  List<Song> _listOfSong;

  /// 歌单界面的当前状态
  SonglistPageState _currentState;

  /// 是否需要显示歌手名字
  bool _needToShowSinger = true;

  /// 当界面第一次初始化时调用
  ///
  /// 需要异步获取歌单信息以及歌单下的歌曲列表，当获得时进行进一步处理
  /// details:
  ///
  /// * [SonglistPageState]
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _currentState = SonglistPageState.waiting;
    SongsInfo().findSongsWithSongsList(widget.songList).then((value){
      if(value == null){
        _currentState = SonglistPageState.error;
        setState(() {});
      }else{
        _listOfSong = value;
        _currentState = _listOfSong.isNotEmpty
            ? SonglistPageState.success : SonglistPageState.empty;
        setState(() {});
      }
    });
  }

  /// 刷新界面时调用，获取根组件尺寸
  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
    Size size = CommonApi.initParameter(context);
    _width = size.width;
    _height = size.height;
    _x = size.width / 420;
    _y = size.height / 800;
  }

  /// 获取歌曲
  ///
  /// 当前获取方法为根据下标获取歌曲列表中的对应歌曲
  String _getSongName(int index) => _listOfSong[index].songName;

  /// 当点击歌曲右方more按钮时调用
  /// 对于歌曲的单独操作
  ///
  /// 对于歌曲而言，操作有：
  ///   从歌单中删除，
  ///   添加至播放列表(设为下一首播放)
  ///   TODO : 实现该方法
  void _onTapListItemMore(Song song){
    showModalBottomSheet(
        barrierColor: Colors.transparent,
        backgroundColor: Colors.transparent,
        context: context,
        builder: (context){
          return Container(
            width: _width,
            height: 150 * _y,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10 * _y)
            ),
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 10 * _y),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    flex: 618,
                    child: LayoutBuilder(
                      builder: (context, constraints){
                        return SizedBox(
                            width: constraints.maxWidth,
                            height: constraints.maxHeight,
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                _operationItem("从歌单中移出", "images/dismiss.png", () {
                                  SongsInfo().deleteSongFromSonglist(widget.songList, song).then((value){
                                    Navigator.of(context).pop();
                                  });
                                }),
                                _operationItem("下一首播放", "images/add.png", () {
                                  PlayList().insertSongBehind(song);
                                })
                              ],
                            )
                        );
                      },
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(width: _width, color: Colors.blueGrey),
                  ),
                  Expanded(
                      flex: 381,
                      child: LayoutBuilder(
                        builder: (context, constraints){
                          return MaterialButton(
                            onPressed: (){
                              Navigator.of(context).pop();
                            },
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10 * _y), bottomRight: Radius.circular(10 * _y))
                            ),
                            splashColor: Colors.cyan[50],
                            height: constraints.maxHeight,
                            minWidth: constraints.maxWidth,
                            child: Center(
                              child: Text(
                                "取消",
                                style: TextStyle(
                                    fontSize: 20 * _y,
                                    color: Colors.blueGrey
                                ),
                              ),
                            ),
                          );
                        },
                      )
                  )
                ],
              ),
            ),
          );
        }).then((value){
      _currentState = SonglistPageState.waiting;
      SongsInfo().findSongsWithSongsList(widget.songList).then((value){
        if(value == null){
          _currentState = SonglistPageState.error;
          setState(() {});
        }else{
          _listOfSong = value;
          _currentState = _listOfSong.isNotEmpty
              ? SonglistPageState.success : SonglistPageState.empty;
          setState(() {});
        }
      });
    });
  }

  /// 当点击添加歌曲按钮时调用
  void _onTapAddButton(){
    Navigator.of(context).push(CustomRoute(
        SonglistSelectPage(widget.songList),
        CustomRoute.BOTTOM_TO_TOP,
        300
    )).then((value){
      _currentState = SonglistPageState.waiting;
      SongsInfo().findSongsWithSongsList(widget.songList).then((value){
        if(value == null){
          _currentState = SonglistPageState.error;
          setState(() {});
        }else{
          _listOfSong = value;
          _currentState = _listOfSong.isNotEmpty
              ? SonglistPageState.success : SonglistPageState.empty;
          setState(() {});
        }
      });
    });
  }

  /// 当点击歌单右上方more按钮
  /// 对于歌单的单独操作
  ///
  /// 对于歌单而言，操作有：
  ///   改变歌单名称(除了默认的“全部歌曲”),
  ///   更改简介,
  ///   * 添加歌曲,
  ///   * 是否显示歌手
  ///   TODO ： 实现该方法
  void _onTapMoreButton(){
    showModalBottomSheet(
        barrierColor: Colors.transparent,
        backgroundColor: Colors.transparent,
        context: context,
        builder: (context){
          return Container(
              width: _width,
              height: 150 * _y,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10 * _y)
              ),
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 10 * _y),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Expanded(
                      flex: 618,
                      child: LayoutBuilder(
                        builder: (context, constraints){
                          return SizedBox(
                            width: constraints.maxWidth,
                            height: constraints.maxHeight,
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                _operationItem("添加歌曲", "images/add_song.png", () {
                                  _onTapAddButton();
                                }),
                                _operationItem("是否显示歌手", !_needToShowSinger ? "images/invisible.png" : "images/visible.png", () {
                                  _needToShowSinger = !_needToShowSinger;
                                  Navigator.of(context).pop();
                                }),
                                _operationItem("更改歌单名", "images/change_listName.png", () {
                                  _showModifyNameDialog().then((value){
                                    Navigator.of(context).pop();
                                  });
                                }),
                                _operationItem("更改简介", "images/change.png", () {
                                  _showModifyIntroductionDialog().then((value){
                                    Navigator.of(context).pop();
                                  });
                                })
                              ],
                            )
                          );
                        },
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(width: _width, color: Colors.blueGrey),
                    ),
                    Expanded(
                      flex: 381,
                      child: LayoutBuilder(
                        builder: (context, constraints){
                          return MaterialButton(
                            onPressed: (){
                              Navigator.of(context).pop();
                            },
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10 * _y), bottomRight: Radius.circular(10 * _y))
                            ),
                            splashColor: Colors.cyan[50],
                            height: constraints.maxHeight,
                            minWidth: constraints.maxWidth,
                            child: Center(
                              child: Text(
                                "取消",
                                style: TextStyle(
                                  fontSize: 20 * _y,
                                  color: Colors.blueGrey
                                ),
                              ),
                            ),
                          );
                        },
                      )
                    )
                  ],
                ),
              ),
          );
        }).then((value){
          setState(() {});
    });
  }

  /// 当点击歌单信息中央的播放按钮时调用
  void _playAllSongsInList(){
    PlayList().setCurrentPlayList(_listOfSong, widget.songList);
  }

  /// 获取简介操作
  String _getIntroduction(SongList list) {
    return list.introduce;
  }

  /// 判断当前播放的是否是该歌曲
  bool _isThisMusic(int index){
    print('index = $index, ${_listOfSong[index] == Music().song}');
    return _listOfSong[index] == Music().song;
  }

  /// 显示简介界面
  void _showMoreIntroduction() {
    showModalBottomSheet(
        context: context,
        backgroundColor: Colors.transparent,
        builder: (context){
          return Container(
              width: _width,
              height: _height - 100 * _y,
              padding: EdgeInsets.all(30 * _y),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(10 * _y),
                  topRight: Radius.circular(10 * _y)
                ),
                border: Border.all(color: Colors.blueGrey),
                color: Colors.white
              ),
              child: SingleChildScrollView(
                physics: BouncingScrollPhysics(),
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 10 * _y),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "简介",
                        style: TextStyle(
                          fontSize: 25 * _y,
                          fontWeight: FontWeight.w800,
                          color: Colors.blueGrey
                        ),
                      ),
                      SizedBox(height: 10 * _y,),
                      Container(
                        padding: EdgeInsets.all(10 * _y),
                        decoration: BoxDecoration(
                          color: Colors.grey[50],
                          borderRadius: BorderRadius.circular(10 * _y),
                        ),
                        child: Text(
                          _getIntroduction(widget.songList),
                          maxLines: 100,
                          style: TextStyle(
                              fontSize: 20 * _y,
                              color: Colors.grey
                          ),
                        ),
                      )
                    ],
                  ),
                )
              )
          );
        } );
  }

  Future<T> _showModifyNameDialog<T>(){
    return CustomWidget.showCustomDialog(
        context: context,
        barrierDismissible: false,
        builder: (context) {
          TextEditingController controller = TextEditingController();
          FocusNode textFocusNode = FocusNode();
          return GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                FocusScope.of(context).requestFocus(FocusNode());
              },
              child: Material(
                color: Colors.transparent,
                type: MaterialType.transparency,
                child: Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: 50 * _x,
                    vertical: 290 * _y,
                  ),
                  child: Card(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10 * y)
                    ),
                    shadowColor: Colors.blueGrey,
                    color: Colors.white,
                    elevation: 5,
                    child: Column(
                      children: [
                        Padding(
                          padding:
                          EdgeInsets.fromLTRB(20 * y, 20 * y, 20 * y, 0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Text(
                                "修改歌单名",
                                style: TextStyle(
                                    fontSize: 20 * y, color: Colors.blueGrey),
                              ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(
                              vertical: 20 * _y, horizontal: 20 * _y),
                          child: Container(
                            width: 300 * _x,
                            height: 30 * _y,
                            child: TextField(
                              controller: controller,
                              textAlignVertical: TextAlignVertical.center,
                              decoration: InputDecoration(
                                  hintText: "请输入新名称",
                                  hintStyle: TextStyle(color: Colors.grey[300]),
                                  border: OutlineInputBorder(
                                      borderRadius:
                                      BorderRadius.circular(10 * x),
                                      borderSide:
                                      BorderSide(color: Colors.cyan)),
                                  contentPadding: EdgeInsets.symmetric(
                                      vertical: 5 * y, horizontal: 10 * y)),
                              textInputAction: TextInputAction.done,
                              style: TextStyle(color: Colors.grey),
                              focusNode: textFocusNode,
                              cursorColor: Colors.blueGrey,
                              onEditingComplete: () {
                                textFocusNode.unfocus();
                              },
                            ),
                          ),
                        ),
                        Spacer(
                          flex: 1,
                        ),
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Expanded(
                              flex: 1,
                              child: GestureDetector(
                                  onTap: () {
                                    textFocusNode.unfocus();
                                    Navigator.of(context).pop();
                                  },
                                  child: Container(
                                    height: 50 * y,
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.only(
                                            bottomLeft:
                                            Radius.circular(10 * y)),
                                        border: Border.all(color: Colors.blueGrey)),
                                    child: Text(
                                      "取消",
                                      style: TextStyle(
                                          fontSize: 20 * y, color: Colors.blueGrey),
                                    ),
                                  )),
                            ),
                            Expanded(
                              flex: 1,
                              child: GestureDetector(
                                  onTap: () {
                                    if (controller.text.isNotEmpty) {
                                      widget.songList.listName = controller.text;
                                      SongsInfo().updateSonglist(widget.songList, "id = ?", [widget.songList.id]).then((value){
                                        if(value != null){
                                          CustomWidget.showToast("修改成功");
                                          widget.songList = value;
                                          setState(() {});
                                          Navigator.of(context).pop();
                                        }
                                      });
                                    } else {
                                      CustomWidget.showToast("歌单名不能为空哦");
                                    }
                                  },
                                  child: Container(
                                    height: 50 * y,
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.only(
                                            bottomRight:
                                            Radius.circular(10 * y)),
                                        border: Border.all(color: Colors.blueGrey)),
                                    child: Text(
                                      "确定",
                                      style: TextStyle(
                                          fontSize: 20 * y, color: Colors.blueGrey),
                                    ),
                                  )),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ));
        });
  }

  Future<T> _showModifyIntroductionDialog<T>(){
    return CustomWidget.showCustomDialog(
        context: context,
        barrierDismissible: false,
        builder: (context) {
          TextEditingController controller = TextEditingController();
          FocusNode textFocusNode = FocusNode();
          return GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                FocusScope.of(context).requestFocus(FocusNode());
              },
              child: Material(
                color: Colors.transparent,
                type: MaterialType.transparency,
                child: Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: 50 * _x,
                    vertical: 255 * _y,
                  ),
                  child: Card(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10 * y)
                    ),
                    shadowColor: Colors.blueGrey,
                    color: Colors.white,
                    elevation: 5,
                    child: Column(
                      children: [
                        Padding(
                          padding:
                          EdgeInsets.fromLTRB(20 * y, 20 * y, 20 * y, 0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Text(
                                "修改简介",
                                style: TextStyle(
                                    fontSize: 20 * y, color: Colors.blueGrey),
                              ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(
                              vertical: 20 * _y),
                          child: Container(
                            width: 300 * _x,
                            height: 100 * _y,
                            child: TextField(
                              controller: controller,
                              textAlignVertical: TextAlignVertical.center,
                              decoration: InputDecoration(
                                  hintText: "请输入内容",
                                  hintStyle: TextStyle(color: Colors.grey[300]),
                                  border: OutlineInputBorder(
                                      borderSide:
                                      BorderSide.none),
                                  contentPadding: EdgeInsets.symmetric(
                                      horizontal: 10 * y)),
                              textInputAction: TextInputAction.done,
                              maxLines: 10,
                              maxLength: 255,
                              style: TextStyle(color: Colors.grey),
                              focusNode: textFocusNode,
                              cursorColor: Colors.blueGrey,
                              onEditingComplete: () {
                                textFocusNode.unfocus();
                              },
                            ),
                          ),
                        ),
                        Spacer(
                          flex: 1,
                        ),
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Expanded(
                              flex: 1,
                              child: GestureDetector(
                                  onTap: () {
                                    textFocusNode.unfocus();
                                    Navigator.of(context).pop();
                                  },
                                  child: Container(
                                    height: 50 * y,
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.only(
                                            bottomLeft:
                                            Radius.circular(10 * y)),
                                        border: Border.all(color: Colors.blueGrey)),
                                    child: Text(
                                      "取消",
                                      style: TextStyle(
                                          fontSize: 20 * y, color: Colors.blueGrey),
                                    ),
                                  )),
                            ),
                            Expanded(
                              flex: 1,
                              child: GestureDetector(
                                  onTap: () {
                                    if (controller.text.isNotEmpty) {
                                      widget.songList.introduce = controller.text;
                                      SongsInfo().updateSonglist(widget.songList, "id = ?", [widget.songList.id]).then((value){
                                        if(value != null){
                                          CustomWidget.showToast("修改成功");
                                          widget.songList = value;
                                          setState(() {});
                                          Navigator.of(context).pop();
                                        }
                                      });
                                    } else {
                                      CustomWidget.showToast("歌单名不能为空哦");
                                    }
                                  },
                                  child: Container(
                                    height: 50 * y,
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.only(
                                            bottomRight:
                                            Radius.circular(10 * y)),
                                        border: Border.all(color: Colors.blueGrey)),
                                    child: Text(
                                      "确定",
                                      style: TextStyle(
                                          fontSize: 20 * y, color: Colors.blueGrey),
                                    ),
                                  )),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ));
        });
  }


  // --------------- widget构造器 ----------------------

  
  /// 歌单/歌曲操作按钮
  Widget _operationItem(String title, String imagePath, VoidCallback onPressed){
    return Padding(
      padding: EdgeInsets.fromLTRB(10, 10, 10, 5),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          MaterialButton(
              onPressed: onPressed,
              elevation: 10,
              splashColor: Colors.cyan[50],
              height: 45 * _y,
              minWidth: 45 * _y,
              padding: EdgeInsets.all(0),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10 * _y)
              ),
              child: SizedBox(
                width: 45 * _y,
                height: 45 * _y,
                child: Image(
                  color: Colors.blueGrey,
                  image: AssetImage(imagePath),
                ),
              )
          ),
          Center(
            child: Text(
              title,
              style: TextStyle(
                  fontSize: 10 * _y,
                  color: Colors.blueGrey
              ),
            ),
          )
        ],
      ),
    );
  }
  
  /// 当歌单为空时调用
  Widget _songlistWithEmpty(){
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            "现在歌单里是空的呢，快来添加歌曲吧",
            style: TextStyle(
                fontSize: 20 * _y,
                color: Colors.cyan
            ),
          ),
          Padding(
              padding: EdgeInsets.symmetric(vertical: 20 * _y, horizontal: 50 * _x),
              child: Align(
                alignment: Alignment.center,
                child: Ink(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10 * _y),
                  ),
                  child: InkWell(
                    borderRadius: BorderRadius.circular(10 * _y),
                    child: MaterialButton(
                      onPressed: _onTapAddButton,
                      height: 60 * _y,
                      minWidth: 100 * _y,
                      color: Setting.songListButtonFrontColor,
                      elevation: 20,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10 * _y),
                      ),
                      child: Align(
                        alignment: Alignment.center,
                        child: Text(
                          "添加歌曲",
                          style: TextStyle(
                              fontSize: 15 * _y,
                              color: Colors.grey[500]
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              )
          ),
        ],
      ),
    );
  }

  /// 正常情况调用
  Widget _songlistWithSuccess(){
    return LayoutBuilder(
      builder: (context, constraints){
        return Container(
          width: constraints.maxWidth,
          height: constraints.maxHeight,
          color: Setting.themeColor,
          child: ListView.builder(
            physics: BouncingScrollPhysics(),
            itemCount: _listOfSong.length,
            itemBuilder: (context, index) {
              return _songListItem(context, index);
            },
            // separatorBuilder: (context, idx) {
            //   return Divider();
            // },
          ),
        );
      },
    );
  }

  /// 等待异步操作返回数据时调用
  Widget _songlistWithWaiting(){
    return Center(child: CircularProgressIndicator(),);
  }

  /// 出错调用
  Widget _songlistWithError(){
    return Center(
      child: Text("出现预料之外的错误 :(",
        style: TextStyle(fontSize: 20 * _y, color: Colors.cyan),
      ),);
  }

  /// 歌曲单元格
  Widget _songListItem(context, index){
    return Ink(
      child: InkWell(
        onTap: (){
          if(!_isThisMusic(index)){
            PlayList().selectMusic(index, widget.songList).then((value){
              setState(() {
              });
            });
          }
        },
        onLongPress: () => _onTapListItemMore(_listOfSong[index]),
        splashColor: Colors.cyan[100],
        child: Container(
            padding: EdgeInsets.all(5.0),
            width: _width,
            height: 70 * _y,
            alignment: Alignment.center,
            color: Setting.themeColor,
            child:Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children:[
                      Container(
                          alignment: Alignment.center,
                          height: 60 * _y,
                          width: 60 * _y,
                          child:ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: Image(
                              image: AssetImage("images/genshen${index%16}.jpg"),
                              fit: BoxFit.cover,
                            ),
                          )
                      ),
                      Container(
                        child:SizedBox(
                          width: 20*_x,
                        ),
                      ),
                      !_needToShowSinger ? SizedBox(
                          width: 200 * _x,
                          child: Text(
                            _getSongName(index),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                                color: _isThisMusic(index) ? Colors.cyanAccent
                                    :  Setting.songListSysThemeColor
                            ),
                          )
                      ) :
                      SizedBox(
                          width: 200 * _x,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                _listOfSong[index].songName,
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                    color: _isThisMusic(index) ? Colors.cyanAccent
                                        :  Setting.songListSysThemeColor,
                                    fontSize: 15 * _y,
                                    fontWeight: FontWeight.w500),
                              ),
                              Text(
                                _listOfSong[index].singerName,
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                    color: _isThisMusic(index) ? Colors.cyanAccent
                                        :  Setting.songListSysThemeColor,
                                    fontWeight: FontWeight.w100),
                              )
                            ],
                          )),
                      Spacer(
                          flex: 1
                      ),
                      _isThisMusic(index) ? Container(
                          width: 30*_y,
                          height: 30*_y,
                          child:Image(
                              color: Colors.cyanAccent,
                              image: AssetImage("images/playing.png")
                          )
                      ) : SizedBox(),
                      SizedBox(
                        width: 10 * _x,
                      ),
                      Container(
                          width: 40*_y,
                          height: 40*_y,
                          child:IconButton(
                            icon: Image(
                                color: Setting.songListButtonBackgroundColor,
                                image: AssetImage("images/more_v.png")
                            ),
                            onPressed: () => _onTapListItemMore(_listOfSong[index]),
                          )
                      ),
                      SizedBox(
                        width: 10 * _x,
                      )
                    ]
                )
              ],
            )
        ),
      ),
    );
  }

  /// 歌单信息主题设计
  Widget _songListIntroBody(context, constraints){
    return Stack(
      children: [
        Container(
          width: constraints.maxWidth,
          height: constraints.maxHeight,
          decoration: BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.cover,
                image: widget.songList.resourceType == ImageResourceType.ASSET ?
                AssetImage(widget.songList.imagePath) :
                widget.songList.resourceType == ImageResourceType.NETWORK ?
                NetworkImage(widget.songList.imagePath) :
                FileImage(File(widget.songList.imagePath))
            ),
          ),
          child:  ClipRRect( // make sure we apply clip it properly
            child: BackdropFilter( //背景滤镜
              filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),//背景模糊化
              child: Container(
                alignment: Alignment.center,
                color: Colors.grey.withOpacity(0.1),
              ),
            ),
          ),
        ),
        Container(
          width: constraints.maxWidth,
          height: constraints.maxHeight,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(
                height: 20 * _y,
              ),
              Container(
                width: constraints.maxWidth,
                height: 70 * _y,
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    CustomWidget.customBackButton(30 * _y, 30 * _y, context, Setting.songListSysThemeColor),
                    Spacer(flex: 1,),
                    Center(
                      child: Text(
                        " 歌 单 ",
                        style: TextStyle(
                            fontSize: 20 * _y,
                            color: Setting.songListSysThemeColor,
                            fontWeight: FontWeight.w900
                        ),
                      ),
                    ),
                    Spacer(flex: 1,),
                    SizedBox(
                      width: 30 * _y,
                      height: 30 * _y,
                      child: IconButton(
                        padding: EdgeInsets.all(0),
                        color: Setting.songListSysThemeColor,
                        icon: Icon(Icons.more_horiz_rounded),
                        onPressed: _onTapMoreButton,
                      ),
                    )
                  ],
                ),
              ),
              Expanded(
                child: LayoutBuilder(
                  builder: (BuildContext context, constraints){
                    return Container(
                      width: constraints.maxWidth,
                      height: constraints.maxHeight,
                      alignment: Alignment.bottomCenter,
                      padding: EdgeInsets.symmetric(horizontal: 20 * _x),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Align(
                            alignment: Alignment.center,
                            child: Text(
                              widget.songList.listName,
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                  fontSize: 35 * _y,
                                  fontWeight: FontWeight.w900,
                                  color: Setting.songListSysThemeColor
                              ),
                            ),
                          ),
                          Padding(
                              padding: EdgeInsets.symmetric(vertical: 10 * _y, horizontal: 20 * _x),
                              child: Align(
                                alignment: Alignment.center,
                                child: Ink(
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10 * _y),
                                  ),
                                  child: InkWell(
                                    borderRadius: BorderRadius.circular(10 * _y),
                                    child: MaterialButton(
                                        onPressed: _currentState == SonglistPageState.success
                                            ?  _playAllSongsInList : null,
                                        height: 80 * _y,
                                        minWidth: constraints.maxWidth,
                                        color: Setting.songListButtonFrontColor,
                                        elevation: 20,
                                        disabledColor: Colors.grey[300],
                                        shape: RoundedRectangleBorder(
                                            borderRadius: BorderRadius.circular(10 * _y)
                                        ),
                                        child: SizedBox(
                                          width: 40 * _y,
                                          height: 40 * _y,
                                          child: Image(
                                            color: Setting.songListButtonBackgroundColor,
                                            image: AssetImage("images/arrow_right_filling.png"),
                                          ),
                                        )
                                    ),
                                  ),
                                ),
                              )
                          ),
                          Padding(
                            padding: EdgeInsets.symmetric(horizontal: 20 * _y),
                            child: Align(
                              child: SizedBox(
                                  width: constraints.maxWidth,
                                  height: 60 * _y,
                                  child: Container(
                                    width: constraints.maxWidth,
                                    height: 60 * _y,
                                    alignment: Alignment.center,
                                    child: GestureDetector(
                                      onTap: _showMoreIntroduction,
                                      child: Text(
                                        "查看简介",
                                        style: TextStyle(
                                            fontSize: 25 * _y,
                                            color: Setting.songListButtonFrontColor
                                        ),
                                      ),
                                    ),
                                  )
                              ),
                            ),
                          )
                        ],
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    Widget songlistWidget;
    switch(_currentState){
      case SonglistPageState.error:
        songlistWidget = _songlistWithError();break;
      case SonglistPageState.empty:
        songlistWidget = _songlistWithEmpty();break;
      case SonglistPageState.success:
        songlistWidget = _songlistWithSuccess();break;
      case SonglistPageState.waiting:
        songlistWidget = _songlistWithWaiting();break;
    }
    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: Container(
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                    flex: 382,
                    child: LayoutBuilder(
                      builder: (context, constraints){
                        return _songListIntroBody(context, constraints);
                      },
                    )
                ),
                Expanded(
                    flex: 618,
                    child: songlistWidget
                ),
              ]
          ),
        )
    );
  }


}
